<template>
  <div class="rights">
    <!-- 面包屑组件 -->
    <el-breadcrumb separator="/">
      <!-- to: 路由跳转对象，同 vue-router 的 to -->
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

       <!-- Table表格组件 : 按需求更改表格字段名  -->
     <!--
       data : 显示的数据，array
       prop : 对应列内容的字段名
      -->
     <el-table
    v-loading="loading"
    :data="tableData"
    border
    style="width: 100%">
     <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      prop="authName"
      label="权限名称"
      width="536">
    </el-table-column>
    <el-table-column
      prop="path"
      label="路径"
      width="536">
    </el-table-column>
    <el-table-column
      label="层级"
      width="536">
      <!-- 为了使用过滤器，这需要改成使用作用域插槽 -->
      <template slot-scope="scope">
          <el-tag :type="getType(scope.row.level)">{{scope.row.level | handleLevel}}</el-tag>
      </template>
    </el-table-column>
  </el-table>

  </div>
</template>

<script>
// 引进封装好的请求函数
import { getRights } from '@/api/handleUrl'

export default {
  data () {
    return {
      // 开启加载效果
      loading: true,
      // 权限列表
      tableData: []
    }
  },
  created () {
    // 初始化表格
    this.initTable()
    // 加载完毕后，关闭加载
    this.loading = false
  },
  methods: {
    // 初始化表格
    initTable () {
      getRights('list').then(res => {
        // console.log(res)
        if (res.meta.status === 200) {
          this.tableData = res.data
        } else {
          this.$message.error(res.meta.msg)
        }
      })
    },
    // 设置不同层级的标签tap样式
    getType (pram) {
      if (pram === '0') {
        return ''
      } else if (pram === '1') {
        return 'success'
      } else {
        return 'warning'
      }
    }
  },
  // 局部过滤器
  filters: {
    handleLevel (pram) {
      if (pram === '0') {
        return '一级'
      } else if (pram === '1') {
        return '二级'
      } else {
        return '三级'
      }
    }
  }
}
</script>
